<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/lake.css">
    <link rel="stylesheet" href="fonts/css/font-awesome.min.css">
    <style>
        .banner {
            width: 100%;
            overflow: hidden;
            /* 默认不可见 */
            visibility: hidden;
            position: relative;
        }
        
        .bannerImg {
            overflow: hidden;
            position: relative;
        }
        
        .bannerImg>li {
            float: left;
            width: 100%;
            position: relative;
        }
        
        .bannerImg>li a {
            width: 100%;
            display: block;
        }
        
        .bannerImg>li img {
            width: 100%;
            display: block;
        }
    </style>
</head>

<body>

    <!-- 头部 -->
    <div class="ymcl-top">
        <div class="logo"><img src="images/logo.png" alt=""></div>
        <div class="top-cen">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="company.html">公司概况</a></li>
                <li><a href="#">华阳湖景区</a></li>
                <li><a href="#">岭南水乡小镇</a></li>
                <li><a href="#">意见反馈</a></li>
            </ul>
        </div>
        <div class="top-l">
            <input type="text" class="q">
            <button class="btn"></button>
        </div>
    </div>

    <!-- banner -->
    <!-- <div class="banner">
        <img src="images/hua/banner1.jpg" alt="">
    </div> -->
    <div class="banner">
        <ul class="bannerImg clearfix">
            <li>
                <a href="javascript:;">
                    <img src="images/hua/banner1.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/hua/banner2.jpg" alt="">
                </a>
            </li>
            <li>
                <a href="javascript:;">
                    <img src="images/lin/banner1.jpg" alt="">
                </a>
            </li>

        </ul>
    </div>
    <!-- <input type="button" value="上一张" id="prev">
    <input type="button" value="下一张" id="next"> -->
    <script src="js/swipe.js"></script>
    <script>
        window.mySwipe = Swipe(document.querySelector('.banner'), {
            auto: 2000
        });
        // document.getElementById('prev').onclick = function() {
        //     window.mySwipe.prev();
        // };
        // document.getElementById('next').onclick = function() {
        //     window.mySwipe.next();
        // };
    </script>


    <!-- 内容1 -->
    <div class="content">
        <figure>
            <h2>关于华阳</h2>
        </figure>

        <div class="content-b">
            <div class="content-l">
                <img src="images/hua/jing.png" alt="">
            </div>
            <div class="content-r">
                <h5>群山中的华阳湖如一颗璀璨的明珠</h5>
                <p>景区以高山截流的华阳湖为中心，随境造景，分别建有水上游乐区、民俗园区、茶文化园区、野果采摘区、会务区、别墅区等各种功能齐备的观光游览服务区。景区建筑红墙黄瓦，独具文化特色，在大自然的碧水青山映衬下，俨然衬托出了一片充满魅力的人间仙境。景区内，游人或可乘小艇劈波于华阳湖上，或可迈步湖畔长堤听山泉喷涌和松涛轰鸣，或可登临拜佛台感悟华阳大佛的广博心境，或可循小径去探索“望夫石”“观音洞”等美丽的传说中的中华民族的深厚文化底蕴。
                </p>
            </div>
        </div>
    </div>

    <!-- 内容2 -->
    <figure>
        <h2>华阳美景</h2>
    </figure>
    <ul class="lake">
        <li>
            <div class="li-t">
                <img src="images//hua/A1.jpg" alt="">
            </div>
            <div class="li-b">
                <p> <span class="fa fa-tree"></span> 水上森林 </p>
                <p> <span class="fa fa-building"></span> 营造湿地水上森林景观，游客可以乘船在森林水道中划行,也可以漫步于森林中
                </p>
            </div>
        </li>
        <li>
            <div class="li-t">
                <img src="images//hua/A2.jpg" alt="">
            </div>
            <div class="li-b">
                <p> <span class="fa fa-tree"></span>花海田园</p>
                <p> <span class="fa fa-building"></span>种植花卉形成花海和花坡景观，种植蔬菜、水果形成农田景观，游客可以采摘新鲜水果品尝
                </p>
            </div>
        </li>
        <li>
            <div class="li-t">
                <img src="images//hua/A3.jpg" alt="">
            </div>
            <div class="li-b">
                <p> <span class="fa fa-tree"></span>花船巡游</p>
                <p> <span class="fa fa-building"></span>各种花卉争妍斗艳，让游人目不暇接。沿蜿蜒的水道，花船驶入花丛中，让游客与花亲密接触
                </p>
            </div>
        </li>
        <li>
            <div class="li-t">
                <img src="images//hua/A4.jpg" alt="">
            </div>
            <div class="li-b">
                <p> <span class="fa fa-tree"></span>水上森林</p>
                <p> <span class="fa fa-building"></span>营造湿地水上森林景观，游客可以乘船在森林水道中划行,也可以漫步于森林中
                </p>
            </div>
        </li>
        <li>
            <div class="li-t">
                <img src="images//hua/A5.jpg" alt="">
            </div>
            <div class="li-b">
                <p> <span class="fa fa-tree"></span>花海田园</p>
                <p> <span class="fa fa-building"></span>种植花卉形成花海和花坡景观，种植蔬菜、水果形成农田景观，游客可以采摘新鲜水果品尝
                </p>
            </div>
        </li>
        <li>
            <div class="li-t">
                <img src="images//hua/A6.jpg" alt="">
            </div>
            <div class="li-b">
                <p> <span class="fa fa-tree"></span>花船巡游</p>
                <p> <span class="fa fa-building"></span>各种花卉争妍斗艳，让游人目不暇接。沿蜿蜒的水道，花船驶入花丛中，让游客与花亲密接触
                </p>
            </div>
        </li>
    </ul>

    <!-- 页尾 -->
    <div class="yes">
        <div class="yes-l">
            <p>@2020广东云景旅游文化产业有限公司</p>
            <ul>
                <li><a>友情链接</a></li>
                <li><a>隐私与安全</a></li>
                <li style="border: 0;"><a>法律声明</a></li>
            </ul>
        </div>
        <div class="yes-r">
            <!-- <a href="#">回到顶部</a> -->
            <button class="top" style="border: 0 solid #000;">回到顶部</button>
        </div>
    </div>
</body>
<script src="js/index.js"></script>

</html>